<template>
    <div class="comment-wrapper">
        <header>
            <i class="fa fa-angle-left" @click="back"></i>
            <p>发表评论</p>
        </header>

    <!-- 发表评论 -->
        <div class="comment-input-section">
            <textarea v-model="newComment" placeholder="请输入您的评价..." rows="4"></textarea>
            <button @click="submitComment" :disabled="!newComment.trim()">提交评价</button>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Comment',
        data() {
        return {
            businessId: this.$route.query.businessId,
            user: {},
            comments: [],
            newComment: '',
          rank:0
    };
    },
    created() {
        this.user = this.$getSessionStorage('user');

    },
    methods: {
        back() {
            this.$router.go(-1);
        },
        submitComment() {
            if (!this.user || !this.user.userId) {
            alert("请先登录！");
            this.$router.push('/login');
            return;
            }

            const url = `CommentController/createComment/${this.user.userId}/${this.businessId}/${this.newComment}/${this.rank}`;
            const payload = {
            userId: this.user.userId,
            businessId: this.businessId,
            comment: this.newComment.trim(),
              rank:this.rank
        };

        this.$axios.post(url, payload)
        .then(res => {
            if (res.data.code === 200) {
                alert("评论成功！");
                this.newComment = '';
                this.getComments();
            } else {
                alert("评论失败！");
            }
        })
        .catch(err => {
            console.error("提交评论失败:", err);
        });
        }
    }
};
</script>

<style scoped>
.comment-wrapper {
  padding: 10px;
  width: 100%;
  height: 100%;
  padding-top: 14vw; /* 避开 header */
}
.comment-wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #01B0F2;
  font-size: 4.8vw;
  color: #fff;
  z-index: 10;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
}
.comment-wrapper header i {
  margin-left: 3vw;
  font-size: 6vw;
  user-select: none;
  cursor: pointer;
}
.comment-wrapper header p {
  margin-left: 33.5vw;
}

.comment-section ul {
  list-style: none;
  padding: 0;
  text-align: center;
}
.comment-section li {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}
.comment-input-section {
  margin-top: 20px;
  text-align: center;
}
textarea {
  width: 90%;
  padding: 10px;
  resize: none;
  border: 1px solid #ccc;
  border-radius: 5px;
}
button {
  margin-top: 10px;
  padding: 10px;
  width: 80%;
  background-color: #01B0F2;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  align-items: center;

}
button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
</style>

